<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局案例</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .top {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }

        .top>div {
            width: 49%;
        }

        .top img {
            width: 100%;
            height: 100%;
        }

        .top .right {
            display: flex;
            justify-content: space-between;
        }

        .top .right>div {
            width: 49%;
        }


        @media screen and (max-width:768px) {
            .top>div {
                width: 100%;
            }
        }

        /* bottom */
        .bottom {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .bottom>div {
            width: 23%;
            padding: 5px;
            box-sizing: border-box;
            border: 1px solid gainsboro;
            margin-bottom: 10px;
            box-shadow: 0 0 5px black;
        }

        .bottom img {
            width: 100%;
        }

        .bottom p {}

        @media screen and (max-width:1024px) and (min-width:768px) {
            .bottom>div {
                width: 31%;
            }
        }
        @media screen and (max-width:768px) and (min-width:450px) {
            .bottom>div {
                width: 48%;
            }
        }
        @media screen and (max-width:450px){
            .bottom>div {
                width: 100%;
            }
        }
    </style>

</head>

<body>

    <!-- top flex wrap
    >768px  左百分49% 右49%
    <768 上下100%

    bottom flex wrap
    >1024 23%*4
    768> <1024 31%*3

    450> <768 48% *2
    <450 90%*1
-->


    <div class="top">

        <div class="left">
            <img src="./image/1.webp" alt="">

        </div>
        <div class="right">

            <div>
                <img src="./image/2.webp" alt="">
            </div>
            <div>
                <img src="./image/3.webp" alt="">
            </div>
        </div>
    </div>

    <div class="bottom">

        <div>
            <img src="./image/1.webp" alt="">
            <p>迷你微信摄影展</p>

        </div>

        <div>
            <img src="./image/1.webp" alt="">
            <p>迷你微信摄影展</p>

        </div>

        <div>
            <img src="./image/1.webp" alt="">
            <p>迷你微信摄影展</p>

        </div>

        <div>
            <img src="./image/1.webp" alt="">
            <p>迷你微信摄影展</p>

        </div>

        <div>
            <img src="./image/1.webp" alt="">
            <p>迷你微信摄影展</p>

        </div>

        <div>
            <img src="./image/1.webp" alt="">
            <p>迷你微信摄影展</p>

        </div>

        <div>
            <img src="./image/1.webp" alt="">
            <p>迷你微信摄影展</p>

        </div>

        <div>
            <img src="./image/1.webp" alt="">
            <p>迷你微信摄影展</p>

        </div>

    </div>


</body>

</html>